<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 导入category样式 -->
    <link rel="stylesheet" href="./css/category.min.css">
    <!-- JS的图片懒加载 -->
    <script src="./js/lazysizes.min.js" async=""></script>
    <!-- 导入进度条 -->
    <link rel="stylesheet" href="./css/nprogress.min.css">
    <script src="./js/nprogress.min.js"></script>
    <!-- 导入axios -->
    <script src="./js/axios.min.js"></script>
    <!-- 导入axios二次封装 -->
    <script src="./js/request.js"></script>
    <!-- 导入categoryjs文件 -->
    <script src="./api/category.js"></script>
</head>

<body>
    <div class="category">
        <!-- 头部 -->
        <div class="top">
            <input onclick="window.location.href = './search.html'" id="keywords" type="text" placeholder="请输入你要搜索的学生">
            &emsp;
            <span onclick="window.history.back()">取消</span>
        </div>
        <!-- 内容区 -->
        <div class="content">
            <div class="left">

            </div>
            <div class="right">

            </div>
        </div>
        <!-- 尾部 -->
        <div class="footer">
            <div onclick="window.location.href = './home.html'">
                <p><img src="http://s08vr7vdh.hn-bkt.clouddn.com/home.png" alt=""></p>
                <p>主页</p>
            </div>
            <div onclick="window.location.href = './category.html'">
                <p><img src="http://s08vr7vdh.hn-bkt.clouddn.com/cate.png" alt=""></p>
                <p>分类</p>
            </div>
            <div onclick="window.location.href = './my.html'">
                <p><img src="http://s08vr7vdh.hn-bkt.clouddn.com/my.png" alt=""></p>
                <p>个人</p>
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            getclazz()
                .then(res => {
                    const clazzInfo = document.querySelector(".content>.left")
                    res.msg.forEach((item, index) => {
                        let str;
                        if (index == 0) {
                            str = `
                            <p class='active' data-id = '${item.cid}'>${item.cname}</p>
                        `
                        } else {
                            str = `
                            <p data-id = '${item.cid}'>${item.cname}</p>
                        `
                        }
                        clazzInfo.innerHTML += str;
                    })

                    //先获取第一个儿子的id,将第一个儿子的id传入
                    showStudentInfo(clazzInfo.firstElementChild.dataset.id)
                    //点击班级=>获取该班的学生信息
                    clazzInfo.onclick = showStudentInfo
                    //点击班级,进行排他思想
                    clazzcolor()
                })
        }
        //显示右边的学生信息
        function showStudentInfo(e) {
            //如果是数字,那么就clazzid就等于这个数字,如果不是数字,那就是时间对象,利用事件对象来获取这个id
            let clazzid;
            if (isNaN(e)) {
                clazzid = e.target.dataset.id;
            } else {
                clazzid = e;
            }
            const studentInfo = getClazzInfoByClazzId(clazzid)
            studentInfo
                .then(result => {
                    const showStudent = document.querySelector(".content>.right")
                    showStudent.innerHTML = "";
                    result.msg.forEach(item => {
                        let str = `
                    <div onclick="window.location.href = './detail.html?id=1'">
                        <p><img data-src="${item.url}" class="lazyload" /></p>
                        <p>姓名:${item.sname}</p>
                        <p>性别:${item.gender}</p>
                        <p>年龄:${item.age}</p>
                    </div>
                    `
                        showStudent.innerHTML += str;
                    })
                })
        }

        //点击班级,进行排他思想
        function clazzcolor() {
            const ps = document.querySelectorAll(".content>.left>p")
            for (let i = 0; i < ps.length; i++) {
                ps[i].onclick = function () {
                    for (let j = 0; j < ps.length; j++) {
                        ps[j].classList.remove("active")
                    }
                    this.classList.add('active')
                }
            }
        }
    </script>
</body>

</html>